import { Space } from "antd";
import HomePage_TableComponent from "../../../../component/table";
import { $EventBus_off, $EventBus_on, $export_excel } from "../../../../../../common/utils";
import { useEffect, useRef, useState } from "react";
import { $Http } from "../../../../../../network";
import HomePage_ModalComponent from "../../../../component/modal";
import HomePage_ModalComponent_SeeMainTransformerOrLineModalComponent from "../../../../component/modal/component/seeMainTransformerOrLineModalComponent";

// 主页-统计查询页面-线路台账页面
const HomePage_StatisticalQueryPage_LineLedgerPage: React.FC = () => {
    const paramsData = useRef<object>({})
    const initParamsData = useRef<object>({})
    let [pageNo, setPageNo] = useState<number>(1)
    let [pageSize, setPageSize] = useState<number>(10)
    const [sourceData, setSourceData] = useState<object>({})
    const [isModal, setIsModal] = useState<boolean>(false)
    const [modalData, setModalData] = useState<object>({})
    const columnList = [
        {
            title: '序号',
            width: 60,
            render: (text: string, record: object, idx: number) => idx + 1,
        },
        {
            title: '监测线路',
            minWidth: 85,
            dataIndex: 'line',
            rowScope: 'row',
            render: (text: string) => text ?? "-"
        },
        {
            title: '类型',
            minWidth: 85,
            dataIndex: 'dataType',
            render: (text: string) => text ?? "-"
        },
        {
            title: '接地方式',
            minWidth: 85,
            dataIndex: 'groundMethod',
            render: (text: string) => text ?? "-"
        },
        {
            title: '监测装置',
            minWidth: 85,
            dataIndex: 'monitorDevice',
            align: "center",
            render: (text: string) => text ?? "-"
        },
        {
            title: '通信地址',
            minWidth: 85,
            dataIndex: 'mailingAddress',
            render: (text: string) => text ?? "-"
        },
        {
            title: '长度(km)',
            minWidth: 85,
            dataIndex: 'length',
            align: "right",
            render: (text: string) => text ?? "-"
        },
        {
            title: '预警值(一级、二级)',
            minWidth: 120,
            align: "right",
            render: (text: string, record: object) => <span>{record["warningValue"]?.["one"] ?? "-"}{!record["warningValue"]?.["one"] && !record["warningValue"]?.["two"] ? " " : "、"}{record["warningValue"]?.["two"] ?? "-"}</span>,
        },
        {
            title: '操作',
            align: "right",
            width: 85,
            fixed: "right",
            render: (text: string, record: object, idx: number) => <span className="homePage-tableOperationBtn" onClick={() => click_operation(record)}>查看</span>
        },

    ];

    const click_operation = (data: object) => {
        setIsModal(true)
        setModalData({ type: "线路", ...data })
    }

    const http_search = () => {
        $Http("search", { typeName: "统计查询/线路台账", ...paramsData.current, pageNo, pageSize }).then((res) => {
            setSourceData({ ...res["data"] })
        })
    }

    const change_pagination = (no: number, size: number) => {
        pageNo = no
        pageSize = size
        setPageNo(pageNo)
        setPageSize(pageSize)
        http_search()
    }

    const change_export = (list: Array<number>) => {
        $export_excel("统计查询/线路台账", list)
    }

    // 广播函数数据
    const eventBusFuncData = {

        // 头部操作初始参数
        headerOperationInitParamsData: (data: object) => {
            initParamsData.current = data["data"]["initParamsData"]
            paramsData.current = data["data"]["initParamsData"]
            http_search()
        },
        // 头部操作查询
        headerOperationSearch: (data: object) => {
            pageNo = 1
            setPageNo(pageNo)
            paramsData.current = { ...paramsData.current, ...data["data"]["paramsData"] }
            http_search()
        },
        // 头部操作条件的开关
        headerOperationConditionSwitch: (data: object) => {
            pageNo = 1
            setPageNo(pageNo)
            paramsData.current = { ...initParamsData.current }
            http_search()
        },
    }


    useEffect(() => {
        $EventBus_on(eventBusFuncData)
        return () => {
            $EventBus_off(eventBusFuncData)
        }
    }, [])
    return (
        <>
            <HomePage_TableComponent name="homePageStatisticalQueryPageLineLedgerPageTable"
                columnList={columnList} highlightList={["监测线路"]}
                isRowSelection
                alignRightList={["长度(km)", "操作","预警值(一级、二级)"]}
                alignCenterList={["监测装置"]}
                pageNo={pageNo} pageSize={pageSize} sourceData={sourceData} change_pagination={change_pagination} change_selectedRowList={change_export} />
            {
                isModal && <HomePage_ModalComponent width={640} change_cancel={setIsModal} contentComponent={<HomePage_ModalComponent_SeeMainTransformerOrLineModalComponent sourceData={modalData} change_cancel={setIsModal} />
                }
                />
            }
        </>

    )
}

export default HomePage_StatisticalQueryPage_LineLedgerPage